import React from "react";
import ReactDOM from 'react-dom';
import { observer } from 'mobx-react';
import './UserTitle.scss';
import { t } from '../../i18n';
import {useHistory} from 'react-router-dom';


import {useMediaQuery} from "@material-ui/core";


export const UserTitle =observer( ()=>{

    const dropDown=()=>{
        var dropDownMenu=document.getElementById("dropdown-menu");
        // @ts-ignore
        dropDownMenu.style.display='list-item';
    }

    const dropUp=()=>{
        var dropDownMenu=document.getElementById("dropdown-menu");
        // @ts-ignore
        dropDownMenu.style.display='none';
    }

    const ClassChange=()=>{
        var ClassChange=document.getElementsByClassName("collapse navbar-collapse");
        ClassChange[0].className='collapse navbar-collapse in';
    }

    const ClassRemove=()=>{
        var ClassChange=document.getElementsByClassName("collapse navbar-collapse in");
        ClassChange[0].className='collapse navbar-collapse ';
    }



    // @ts-ignore
    return(
        <nav className="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div className="container">
                <div className="navbar-header">
                    <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#header-navbar" onMouseEnter={ClassChange} >
                        <span className="sr-only">Toggle navigation</span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                    </button>
                    <a className="navbar-brand" href="{:url('/')}">{t('home.short_title.title')}</a>
                </div>
                <div className="collapse navbar-collapse" id="header-navbar">
                    <ul className="nav navbar-nav navbar-right">
                        <li><a href="">{t('homepage')}</a></li>
                        <li className="dropdown" onMouseEnter={dropDown} onMouseLeave={dropUp} >

                                <a href="" className="dropdown-toggle" data-toggle="dropdown">{t('user.member center')} <b className="caret"></b></a>
                                <ul className="dropdown-menu" id="dropdown-menu" >

                                <li><a href=""><i className="fa fa-user-circle fa-fw"></i>{t('user.login')}</a></li>
                                <li><a href=""><i className="fa fa-user-o fa-fw"></i>{t('user.register')}</a></li>

                                </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    )
})


